<template>
	<view class="info_warp">
		<view class="form_box">
			<view class="user_photo_box">
				<image class="photo" src="~@/static/jitai/pic/1200.jpg">
				<view class="name_level">
					<view class="name">云中的枫野</view>
					<view class="level">
						<view class="l_icon level_3"></view>
						市级代理
					</view>
				</view>
			</view>
			<view class="alert_box" style="padding: 0 30rpx 30rpx 30rpx;">
				<u-button plain shape="circle" type="warning" size="medium">
					<u-icon name="tishishuoming" customPrefix="coolc" top="2" color="#fcbd71" size="32"></u-icon> 如需帮助，您的服务关系将为您服务。
				</u-button>
			</view>
			<view class="orange_alert"></view>
			<u-cell-group>
				<u-cell-item icon="account" title="用户名" value="云中的枫野" :arrow="false"></u-cell-item>
				<u-cell-item icon="phone" title="手机号码" @click="call_phone" :valueStyle="valueStyle" value="199-7086-1797" :arrow="false"></u-cell-item>
				<u-cell-item icon="integral" title="用户等级" value="市级代理" :arrow="false"></u-cell-item>
				<u-cell-item icon="weixin-fill" title="微信号" value="liuyunxh" :arrow="false"></u-cell-item>
			</u-cell-group>
			
			<view class="photoTop" v-if="info.weixinqr">
				<u-image width="280rpx" height="280rpx" duration="450" :src="info.weixinqr"></u-image>
				<text class="weixin_tips">微信二维码（扫码加好友）</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: [],
				valueStyle: {
					fontWeight: 'bold',
					color: '#18B566'
				}
			};
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	page {
		background: #f1f1f1;
	}
	.photoTop {
		width: 100%;
		text-align: center;
		padding: 40rpx 0 30rpx 0;
	
		.u-image {
			width: 280rpx;
			margin: 0 auto;
		}
		
		.weixin_tips {
			color: #999999;
		}
	}
	.user_photo_box {
		width: 100%;
		height: 240rpx;
		padding-top: 100rpx;
		position: relative;
		text-align: center;
		
		.photo {
			width: 140rpx;
			height: 140rpx;
			border-radius: 140rpx;
			border: 6rpx solid #fff;
			position: absolute;
			left: 50%;
			top: -40rpx;
			margin-left: -70rpx;
		}
		.name_level
		{
			width: auto;
			
			.name {
				font-size: 34rpx;
				padding: 8rpx 0;
			}			
			.level {
				width: auto !important;
				display: inline-block;
				margin-top: 8rpx;
				color: #999 !important;
			}
		}
	}
</style>
